<template>
  <div>
    <banner-section :carousels="carousels" class="d-none d-sm-block" />
    <m-download-section ref="download" class="d-sm-none" />
    <advantage-section class="d-none d-sm-block" />
    <m-advantage-section ref="adavantage" class="d-sm-none" />
    <news-section
      :news-list="newsList"
      :img-domain="imgDomain"
      class="d-none d-sm-block"
    />
    <m-news-section
      :news-list="newsList"
      :img-domain="imgDomain"
      class="d-sm-none"
    />
    <aboutus-section class="d-none d-sm-block" />
    <team-section class="d-none d-sm-block" />
    <cooperative-brand-section class="d-none d-sm-block" />
    <m-cooperative-brand-section class="d-sm-none" />
    <m-aboutus-section ref="aboutUs" class="d-sm-none" />
    <b-container fluid class="bottom-banner d-none d-sm-block"></b-container>
    <ContactSection />
  </div>
</template>

<script>
import ContactSection from '@/components/m/ContactSection';
import BannerSection from '@/components/sections/Banner';
import MDownloadSection from '@/components/sections/MDownload';
import AdvantageSection from '@/components/sections/Advantage';
import MAdvantageSection from '@/components/sections/MAdvantage';
import NewsSection from '@/components/sections/News';
import MNewsSection from '@/components/sections/MNews';
import AboutusSection from '@/components/sections/Aboutus';
import TeamSection from '@/components/sections/Team';
import CooperativeBrandSection from '@/components/sections/CooperativeBrand';
import MCooperativeBrandSection from '@/components/sections/MCooperativeBrand';
import MAboutusSection from '@/components/sections/MAboutus';
import CarouselsData from '@/static/api-mock/carousel';
import siteConfig from '@/assets/config/site';

const CATEGORY_API = `${siteConfig.apiPrefix}${siteConfig.apis.category}`;
const NEWS_API = `${siteConfig.apiPrefix}${siteConfig.apis.news}`;

export default {
  categoryAPI: CATEGORY_API,
  newsAPI: NEWS_API,
  components: {
    ContactSection,
    BannerSection,
    MDownloadSection,
    AdvantageSection,
    MAdvantageSection,
    NewsSection,
    MNewsSection,
    AboutusSection,
    TeamSection,
    CooperativeBrandSection,
    MCooperativeBrandSection,
    MAboutusSection,
  },
  // layout: 'm',
  data() {
    return {
      currentSection: null,
      currentScrollTop: 0,
      scrollTop: undefined,
      carousels: CarouselsData.entries,
      newsList: [],
      newsCount: 0,
      imgDomain: '',
    };
  },
  watch: {
    currentSection: function(val) {
      this.scrollToSection(val);
    },
  },
  async asyncData({ $axios }) {
    const pageSize = 4;
    let newsList = [];
    let newsCount = 0;
    let imgDomain = '';
    try {
      const data = (await $axios.$get(NEWS_API, {
        params: { pageSize },
      })).data;
      newsList = data.entries;
      newsCount = data.count;
      imgDomain = data.domain;
    } catch (err) {
      newsList = [];
      newsCount = 0;
      imgDomain = '';
    }
    return {
      newsList,
      newsCount,
      imgDomain,
    };
  },
  async mounted() {
    if (this.newsList.length === 0) {
      await this.loadNewsList();
    }
  },
  methods: {
    async loadNewsList(page = 1, category = 0) {
      const pageSize = 4;
      try {
        const data = (await this.$axios.$get(this.$options.newsAPI, {
          params: {
            page: page - 1,
            category,
            pageSize,
          },
        })).data;
        this.newsList = data.entries;
        this.newsCount = data.count;
        this.imgDomain = data.domain;
        // this.currentPage = parseInt(data.page) + 1;
      } catch (err) {
        this.$message.error('网络错误，请稍后再试');
      }
    },
    scrollToSection(sectionName) {
      const ele = this.$refs[sectionName];
      if (!ele) {
        return;
      }
      this.scroll();
    },
    scroll() {
      let ele = this.$refs[this.currentSection];
      ele = ele.$el || ele;
      ele.scrollIntoView();
      // const body =
      //   document.scrollingElement || document.body || document.documentElement;
      // body.scrollTop = ele.offsetTop;
    },
    onWindowScroll(eventArgs, domEle) {
      this.currentScrollTop = window.scrollY;
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.currentSection = to.query.section;
    });
  },
  beforeRouteUpdate(to, from, next) {
    this.currentSection = to.query.section;
    console.log('>>>>current section', this.currentSection);
    next();
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/m/_sectionTitle.scss';

// section {
//   overflow: hidden;
// }
.bottom-banner {
  height: 360px;
  text-align: center;
  background-image: url('/images/bottom-banner.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
</style>
